<template>
	<view>

		<!-- 轮播区域 -->
		<Banner v-if="cateObj" :banner="cateObj.category.bannerUrlList"></Banner>
		<!-- <swiper>
			<swiper-item v-for="(item,index) in cateObj.category.bannerUrlList" :key='index'>
				<image :src='item' mode=""></image>
			</swiper-item>
		</swiper> -->
		<!-- 信息介绍 -->
		<view class="info">
			<view v-if="cateObj" class="myTitle">
				{{cateObj.category.frontName}}
			</view>
			<view  v-if="cateObj" class="mySubTitle">
				{{cateObj.category.name}}
			</view>
		</view>
		<!-- 商品展示 -->
		<view class="list" v-if="cateObj">
			<view   class="item" v-for="item in cateObj.itemList" :key='item.id' @click="toDetail(item)">
				<image :src='item.listPicUrl' mode=""></image>
				<view class="title">
					{{item.name}}
				</view>
				<view class="price">
					￥{{item.retailPrice}}
				</view>
			</view>
		</view>
	<!-- 返回顶部 -->
	<view class="goTop" v-if="isShow" @click="goTop">
		返回
	</view>
	</view>
</template>

<script>
	export default {
		name: "MenuCate",
		props: ['cateId'],
		data() {
			return {
				isShow:false,
				indexCateList: [],
			};
		},
		//计算属性 筛选想要的数据

		created() {
			// console.log('uni---',uni.$base,uni.$http);
			this.getIndexCateList();
			window.addEventListener('scroll',scrollFun)
			//定义滚动事件
			function scrollFun(){
				console.log('滚动高度',window.screenTop);
			}
		},
		methods: {
			//获取导航分类产品信息
			async getIndexCateList() {
				let res = await uni.$http(uni.$base.indexCateList)
				console.log('导航分类产品信息', res.indexCateList);
				this.indexCateList = res.indexCateList;
			},
			//点击商品详情
			toDetail(item) {
				console.log('item----',item);
				uni.navigateTo({
					url: '../detail/detail?goodsInfo='+JSON.stringify(item)
				})
			},
			//点击返回
			goTop(){
				console.log('点击返回顶部');
				uni.pageScrollTo({
					scrollTop:0,
					duration:300
				})
			}
		},
		computed: {
			cateObj() {
				// return this.indexCateList.find(ele=>ele.category.parentId === this.cateId);
				let obj = this.indexCateList.find(item => item.category.parentId == this.cateId)
				console.log('obj----', obj);
				return obj
			}
		},
	}
</script>

<style lang="scss" scoped>
	.goTop{
		position: fixed;
		right: 20rpx;
		bottom: 20rpx;
		background: rgba(0,0,0,0.4);
		font-size: 12rpx;
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		text-align: center;
		line-height: 60rpx;
		color:#fff
	}
	.info {
		margin: 20rpx;
		text-align: center;

		.myTitle {
			font-size: 40rpx;
		}

		.mySubTitle {
			color: #666;
		}
	}

	.list {
		display: flex;
		flex-wrap: wrap;
		padding: 20rpx;
		justify-content: space-between;

		.item {
			width: 344rpx;
			margin-bottom: 20rpx;

			image {
				width: 344rpx;
				height: 344rpx;
			}

			.title {
				color: #666;
				margin-bottom: 10rpx;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.price {
				color: #ff5555;
			}
		}
	}
	
</style>